<template>
  <div class="category">
    <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
    <div class="category-content">
      <tab-menu :categories="categories" @menuClick="menuClick"/>
      <scroll class="right-scroll" ref="rightScroll">
        <div>
          <tab-content-category :sub-list="subList"/>
          <tab-control :titles="titles" @tabClick="tabClick" ref="tabControl"/>
          <goods-list :goods="showGoods"/>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
  import TabMenu from './childcomps/TabMenu.vue'
  import TabContentCategory from './childcomps/TabContentCategory.vue'

  import NavBar from 'components/common/navbar/NavBar'
  import Scroll from 'components/common/scroll/Scroll'

  import TabControl from 'components/content/tabControl/TabControl'
  import GoodsList from 'components/content/goods/GoodsList'

  import {getCategory} from 'network/category'
  import {getHomeGoods} from 'network/home'

  export default {
    name: 'Category',
    components: {
      TabMenu,
      TabContentCategory,

      NavBar,
      Scroll,

      TabControl,
      GoodsList
    },
    data() {
      return {
        categories: {},
        subcategories: {},
        menuIndex: 0,
        titles: ['流行', '古风', '欧美'],
        goods: {
          '流行': {page: 0, list: []},
          '古风': {page: 0, list: []},
          '欧美': {page: 0, list: []}
        },
        currentType: '流行'
      }
    },
    computed: {
      subList() {
        return this.subcategories[this.menuIndex] || []
      },
      showGoods() {
        return this.goods[this.currentType].list || []
      }
    },
    methods: {
      /* 事件响应相关方法 */
      // 点击菜单栏
      menuClick(index) {
        this.menuIndex = index
        this.$refs.rightScroll.scrollTo(0, 0, 0)
        this.currentType = this.titles[0]
        this.$refs.tabControl.currentIndex = 0
      },
      // 点击tab栏
      tabClick(i) {
        // console.log(i)
        this.currentType = this.titles[i]
      },

      /* 网络请求相关方法 */
      // 获取分类和子分类
      _getCategories() {
        getCategory().then(res => {
          // console.log(res);
          this.categories = res.categories
          // 初始化subcategories
          for (let i = 0; i < Object.keys(this.categories).length; i++) {
            // 要这样添加属性，才有getter和setter Vue才能识别内部数据的变化
            this.$set(this.subcategories, i, [])
          }
          // 获取每个分类的子分类
          res.sub.forEach(item => {
            // console.log(item);
            this.subcategories[item.category].push(item)
          });
        })
      },
      // 获取商品
      _getHomeGoods(cat) {
        getHomeGoods(cat).then(res => {
          // console.log(res)
          this.goods[cat].list.push(...res.playlists)
        })
      }
    },
    created() {
      this._getCategories()
      // 2. 请求商品数据
      this._getHomeGoods('流行')
      this._getHomeGoods('古风')
      this._getHomeGoods('欧美')
    }
  }
</script>

<style scoped>
  .category {
    height: 100vh;
  }

  .nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
  }

  .category-content {
    display: flex;
    height: calc(100% - 49px);
    justify-content: space-between;
  }

  .right-scroll {
    width: calc(100% - 100px);
    height: calc(100% - 49px);
    overflow: hidden;
  }
</style>